<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>校验</title>
    <link rel="stylesheet" href="../../css/register/register1.css">
</head>
<body>
    <div id="outer">
        <form  id='register_form' onsubmit='return reg();'>
        <table>
            
            <caption><h3>用户注册</h3></caption>
            <tr>
                <td>用户名</td>
                <td><input type='text' id="username"></td>
                <td><span>*</span></td>
            </tr>
            <tr>
                <td>密码</td>
                <td><input type='text' id="password"></td>
                <td><span>*</span></td>
            </tr>
            <tr>
                <td>确认密码</td>
                <td><input type='text' id="pwd"></td>
                <td><span>*</span></td>
            </tr>
            <tr style="text-align: center;">
                <td colspan="3">
                    <a href="../login/login.html"><input type="submit" id="reg_btn" value="注册"></a>
                    <input type="reset" value="重置">
                </td>
            </tr>
        </table>
    </form>
    </div>

    <script>
      
        let username = document.getElementById("username");
        let p1 = document.getElementById("password");
        let p2 = document.getElementById("pwd");

      
        username.onblur=()=>{

            
           
            let username_reg = /^[a-z][0-9a-zA-Z_]{4,}$/;

          
            let span = username.parentElement.nextElementSibling.children[0];

          
            if(username_reg.test(username.value)){
                span.className="success";
                span.innerHTML="√";
                return true;
            }else{
                span.className="error";
                span.innerHTML="* 首字母必须要小写,其余由数字,字母,_组成,总长度不少于5个";
                return false;
            }
        }

        p1.onblur=function(){
            let reg = /^\d{8}$/;
            let span = this.parentElement.nextElementSibling.children[0];
            
            if(reg.test(this.value)){
                span.className="success";
                span.innerHTML="√";
                return true;
            }else{
                span.className="error";
                span.innerHTML="* 密码必须是纯数字且8位";
                return false;
            }
        }

        p2.onblur = function(){
            let span = this.parentElement.nextElementSibling.children[0];
            if(this.value==p1.value && this.value.trim()!=""){
                span.className="success";
                span.innerHTML="√";
                return true;
            }else{
                span.className="error";
                span.innerHTML="* 俩次密码不一样";
                return false;
            }
        }          
        function reg(){
            if(username.onblur() & p1.onblur() & p2.onblur()){
                return true;
            }
            return false;
        }
    </script>
</body>
</html>